<template>
	<view class="container">
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>
		<view class="">
			<view class="password2-title">
				请输入原六位支付密码
			</view>
			<view class="password2">
				<input type="password" class="password2-item" maxlength="1" :focus="focus1" v-model="number1" />
				<input type="password" class="password2-item" maxlength="1" :focus="focus2" v-model="number2" />
				<input type="password" class="password2-item" maxlength="1" :focus="focus3" v-model="number3" />
				<input type="password" class="password2-item" maxlength="1" :focus="focus4" v-model="number4" />
				<input type="password" class="password2-item" maxlength="1" :focus="focus5" v-model="number5" />
				<input type="password" class="password2-item" maxlength="1" :focus="focus6" v-model="number6" />
			</view>
		</view>

		<view class="tips">
			<view>避免使用连续或重复的数字，类似“123456”，“112233”</view>
			<view>避免使用手机号、证件号中的连续数字</view>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				title: '原支付密码',
				code: '',

				number1: '',
				number2: '',
				number3: '',
				number4: '',
				number5: '',
				number6: '',

				focus1: true,
				focus2: false,
				focus3: false,
				focus4: false,
				focus5: false,
				focus6: false,
			};
		},
		onLoad(option) {
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}
			
			this.code = option.code;
		},
		watch: {
			number1(newNumber, oldNumber) {
				let res = this.change(newNumber, 'focus', 'number', 1)
				if (res == false) {
					return false;
				}
				this.submit()
			},
			number2(newNumber, oldNumber) {
				let res = this.change(newNumber, 'focus', 'number', 2)
				if (res == false) {
					return false;
				}
				this.submit()
			},
			number3(newNumber, oldNumber) {
				let res = this.change(newNumber, 'focus', 'number', 3)
				if (res == false) {
					return false;
				}
				this.submit()
			},
			number4(newNumber, oldNumber) {
				let res = this.change(newNumber, 'focus', 'number', 4)
				if (res == false) {
					return false;
				}
				this.submit()
			},
			number5(newNumber, oldNumber) {
				let res = this.change(newNumber, 'focus', 'number', 5)
				if (res == false) {
					return false;
				}
				this.submit()
			},
			number6(newNumber, oldNumber) {
				let res = this.change(newNumber, 'focus', 'number', 6)
				if (res == false) {
					return false;
				}
				this.submit()
			},
		},
		methods: {
			...mapMutations(['logout']),

			async submit() {
				if (!this.code) {
					this.$api.msg('非法操作！');
					this.logout();
					uni.setStorageSync('token', '')
					uni.setStorageSync('cate', 0)
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 600)
				}
				if (this.number1 != '' && this.number2 != '' && this.number3 != '' && this.number4 != '' && this
					.number5 != '' && this.number6 != '') {
					let password = this.number1 + this.number2 + this.number3 + this.number4 + this.number5 +
						this.number6;

					let res = await this.$myRequest({
						url: '/checkPwd2',
						data: {
							token: uni.getStorageSync('token'),
							code: this.code,
							password: password
						},
						methods: 'POST'
					})

					if (res.data.status == 1) {
						this.$api.msg(res.data.msg, 'success');
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/new-password2/new-password2?code=' + this.code
							})
						}, 1500)
					}
				}
			},

			async change(newNumber, focus, number, num) {
				if (!newNumber) {
					return false;
				}
				if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].indexOf(newNumber) == -1) {
					this.$api.msg('请务必输入数字');
					this[`${number}${num}`] = null;
					return false;
				}

				this[`${focus}${num}`] = false;
				if (num != '6') {
					this[`${focus}${num+1}`] = true;
				}

				return true;
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
	}
</style>
<style lang='scss'>
	.container {
		// #ifdef APP-PLUS
		padding-top: 168rpx;
		// #endif
		
		// #ifdef H5
		padding-top: 116rpx;
		// #endif
	}

	.password2-title {
		padding: 78rpx 0;
		text-align: center;
	}

	.password2 {
		display: flex;
		justify-content: space-between;
		padding: 0 50rpx 50rpx;

		.password2-item {
			background-color: #fff;
			width: 72rpx;
			height: 88rpx;
			border-radius: 10rpx;
			padding: 10rpx;
			text-align: center;
		}
	}

	.tips {
		padding: 0 50rpx;
		line-height: 50rpx;
		height: 50rpx;
	}
</style>
